<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <Echart id="leftBottom"
          :options="option"
          :isWatchAutoInit="false"
          class="left_bottom_inner"
          v-if="pageflag" ref="charts"
          @handleChartEvent="handleChartEvent"
  />
  <Reacquire v-else @onclick="getData" style="line-height:200px">
  </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules'
import dataValues from "@/assets/js/data_values.json";
export default {
  data() {
    return {
      option: {},
      countUserNumData: {
        lockNum: 0,
        onlineNum: 0,
        offlineNum: 0,
        totalNum: 0,
      },
      pageflag: false,
      timer: null,
      len:0,
      dataIndex:0,
      xAxisData:[],
      yAxisData:[],
      myChart:null,
      dataLen:0
    };
  },
  created() {
    // this.getData()
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
    this.clearData()
  },
  watch:{
    '$store.state.setting.echartsAutoTime':{
      handler () {
        this.clearData();
        this.switper();
      },
      deep: true
    }
  },
  props: {
    socketData: Object
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    getData() {
      if(this.socketData.hull_area){
        this.pageflag = true
        const now = new Date();
        if(this.yAxisData.length > 4){
          this.xAxisData.shift()
          this.yAxisData.shift()
          this.xAxisData.push(now.getMinutes()+":"+now.getSeconds()+":"+now.getMilliseconds())
          if(this.socketData.change_status){
            this.yAxisData.push(parseFloat(this.socketData.hull_area.toFixed(3)))
          }else{
            this.yAxisData.push(0)
          }
        }else{
          this.xAxisData.push(now.getMinutes()+":"+now.getSeconds()+":"+now.getMilliseconds())
          if(this.socketData.change_status){
            this.yAxisData.push(parseFloat(this.socketData.hull_area.toFixed(3)))
          }else{
            this.yAxisData.push(0)
          }
        }
        this.$nextTick(() => {
          this.init(this.xAxisData, this.yAxisData);
        });
        if(this.myChart){
          this.myChart.setOption(this.option);
          this.myChart.dispatchAction({
            type: 'shift',
            seriesName: '河流面积'
          });
        }
      }

      this.switper();
    },
    handleChartEvent(val){
      this.myChart = val;
      setTimeout(()=>{
        this.myChart.setOption(this.option, true)
        this.dataLen = this.option.series[0].data.length;
      },1000)
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
    init(xdata,vdata) {
      const colorsPlan = [
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#54C1E1",
            },
            {
              offset: 0.5,
              color: "#2ab6e7",
            },
            {
              offset: 0.5,
              color: "#19A5B5",
            },
            {
              offset: 1,
              color: "#056e8a",
            },
          ],
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#babe53",
            },
            {
              offset: 0.5,
              color: "#acb758",
            },
            {
              offset: 0.5,
              color: "#9b9a52",
            },
            {
              offset: 1,
              color: "#6e6c21",
            },
          ],
        },
        {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#d27739",
            },
            {
              offset: 0.5,
              color: "#cd7a3f",
            },
            {
              offset: 0.5,
              color: "#c4733f",
            },
            {
              offset: 1,
              color: "#8a3305",
            },
          ],
        },
      ];

      const colorsTop = ['#54C1E1', '#c1c471', '#df894e']

      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          formatter(params) {
            return (params[0].name + "：" + params[0].data + '米')
          },
        },
        grid: {
          top: '19%',
          left: '3%',
          right: '6%',
          bottom: '20',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: xdata,
          axisLabel: {
            textStyle: {
              color: '#666',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#AFAFAF',
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name: '河流面积',
          min:function(value){
            return parseFloat((value.min - 0.1).toFixed(3));
          },
          // interval: 0.1,
          // splitNumber: 6,
          nameTextStyle: {
            color: 'rgba(255,255,255,1)',
            fontFamily: 'Microsoft YaHei',
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#666',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#AFAFAF',
            },
          },
          splitLine: {
            show: false,
          },
        },
        animation: this.$store.state.setting.isAnimation,
        series: [
          // 第一条数据进度柱子
          {
            animationDuration: this.$store.state.setting.echartsAutoTime,
            name:"河流面积",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              color: function (params) {
                var index = params.dataIndex
                if (params.dataIndex >= colorsPlan.length) {
                  index = params.dataIndex - colorsPlan.length
                }
                return colorsPlan[index]
              },
              borderRadius: 0,
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#fff',
              },
            },
            data: vdata,
          },
          // 第一条数据上面正方形：颜色
          {
            animationDuration: this.$store.state.setting.echartsAutoTime,
            name:"",
            type: "pictorialBar",
            symbol: "diamond",
            symbolSize: [20, 8],
            symbolOffset: [0, -4],
            symbolPosition: "end",
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  var index = params.dataIndex
                  if (params.dataIndex >= colorsTop.length) {
                    index = params.dataIndex - colorsTop.length
                  }
                  return colorsTop[index]
                },
              },
            },
            data: vdata,
          }
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
</style>